<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-date-picker
          ref="rangPicker"
          v-model="pickDateRange"
          size="mini"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="截至日期">
        </el-date-picker>
        <rrOperation :crud="crud" />
      </div>
      <br>
      <el-row  type="flex" justify="center" align="middle">
        <el-col class="image_wrap">
          <el-card v-for="(obj,index) in crud.data"  :body-style="{ padding: '10px' }"
                   class="imageCard"
          >
<!--            <el-image :src= "baseApi + '/api/v2/public/getImage?id=' + obj.local_image_id" class="image"  fit="contain" lazy   >-->
<!--              <div slot="error" class="image-slot">-->
<!--                <span>No Image</span>-->
<!--              </div>-->
<!--            </el-image>-->


            <el-image :src= "baseApi + '/api/v2/public/getImage?id=' + obj.local_image_result_id" class="image"  fit="contain" lazy @click="handleShowImageViewer(obj.local_image_result_id)"   >
              <div slot="error" class="image-slot">
                <span>No Image</span>
              </div>
            </el-image>
            <div style="padding: 2px;">
              <el-row v-for="(bugResult,bugResultIndex) in obj.bugResult" >
                <el-col :span="20">
                  {{bugResult.bugTypeName + '(' + bugResult.bugType + ')'}}
                </el-col>
                <el-col :span="4">
                  {{bugResult.bugCount}}
                </el-col>
              </el-row>
              <el-row>
                时间：{{obj.create_time}}
              </el-row>

<!--              <span>好吃的汉堡</span>-->
<!--              <div class="bottom clearfix">-->
<!--                <el-button type="text" class="button">操作按钮</el-button>-->
<!--              </div>-->
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog :visible.sync="showImageViewer" width="60%"   append-to-body  >
      <img width="100%" v-if="imageViewerId" :src="baseApi+ '/api/v2/public/getImage?id=' +imageViewerId" alt="">
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/V2/crud'
import rrOperation from '@crud/V2/RR.operation'
import pagination from '@crud/V2/Pagination'
import {mapGetters} from "vuex";
import Date from "@/utils/datetime";

const defaultForm = { id: null }
export default {
  name: 'cbdDetial',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '测报灯数据查看', url: 'api/v2/base/farm/farmSq/cbd', idField: 'id', sort: 'id,desc', crudMethod: { }, page:{ size:8, page:1, sizes: [8,16,24,32,40]}})
  },
  data() {
    return {
      showImageViewer: false,
      imageViewerId:'',
      pickDateRange: [(new Date()).daysAgo(7).strftime('%Y-%m-%d'),(new Date()).strftime('%Y-%m-%d')], // 查询时间段
      permission: {
      },
      rules: {
      },
      queryTypeOptions: [
        { key: 'startDate', display_name: '开始日期' },
        { key: 'endDate', display_name: '截至日期' }
      ],
      fields: []
    }
  },

  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  created() {
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      if (this.pickDate !== undefined && this.pickDate.length === 2) {
        this.query.startDate = this.pickDateRange[0]
        this.query.endDate = this.pickDateRange[1]
        console.log(this.query)
      } else {
        this.query.startDate = null
        this.query.endDate = null
      }
      return true
    },
    [CRUD.HOOK.beforeResetQurey]() {
      let endDate = new Date()
      let startDate = endDate.daysAgo(7)
      var picker = this.$refs.rangPicker.picker
      if(picker){
        picker.$emit('pick', [startDate.strftime('%Y-%m-%d'), endDate.strftime('%Y-%m-%d')]);
      }
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {
    },
    handleShowImageViewer(imageId) {
      this.imageViewerId = imageId
      this.showImageViewer = true
    },
  }
}
</script>

<style scoped>
.image_wrap {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  width: 1000px;
}
.imageCard {
  margin: 5px;
  flex: 1 0 180px;
}
</style>
